<script setup>
import { ref, reactive, watch, watchEffect } from 'vue'

let list = reactive([])//声明一个空数组存放
let showDialog = ref(false)//弹框显示隐藏状态
let currentChoose = ref(null)//当前选择
let form = reactive({ count: '', time: '' })
const formRef = ref(form)
//表单校验规则
const rules = reactive({
    count: [{ required: true, message: "必填", trigger: "change" }], time: [{
        required: true, message: "必填", trigger: "change"
    }]
})
const columns = [{ title: "内容", key: "count" }, { title: "日期", key: "time" },
{ title: "操作", key: "index" }
]

//设置缓存
try {
    const data = JSON.parse(localStorage.getItem('list')) || []
    list = reactive(
        data.map(el => {
            return ({ ...el, time: new Date(el.time) })
        })
    )
} catch (err) {
    console.log(err);
    list = reactive([])
}
watch(list, (val) => {
    localStorage.setItem('list', JSON.stringify([...val]))
}
)

// 创建
const addBtn = () => {
    showDialog.value = true
}
//编辑
const compileBtn = (el, id) => {
    showDialog.value = true
    currentChoose.value = id
    form.count = el.count
    form.time = el.time
}
//删除
const deleteBtn = (id) => {
    list.splice(id, 1)
}
//确认
const Confirm = function (isAdd) {
    formRef.value.validate().then(() => {
        if (isAdd) {
            console.log(form);
            list.unshift({ ...form })
        } else {
            list[currentChoose.value] = { ...form }
        }
        formRef.value.resetFields()
    }).catch(() => {
        // 校验失败
        ElMessage({ message: "请按照要求填写表单", type: "warning" })
    })
    showDialog.value = false
}


// 生成1W个数
// for (let i = 1; i < 1000; i++) {
//     console.log(i);
//     list.push({ count: '第'+i+'头🐷', time: new Date() })
// }
</script>

<template>
    <!-- 创建 -->
    <el-button @click="addBtn()">创建</el-button>
    <!-- 弹框 -->
    <el-dialog v-model="showDialog">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="内容" prop="count">
                <el-input v-model="form.count"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="time">
                <el-date-picker v-model="form.time"></el-date-picker>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="Confirm(currentChoose === null)">确认</el-button>
        </template>
    </el-dialog>
    <!-- 页面 -->
    <el-table-v2 :columns="columns" :data="list" :width="800" :height="600">
        <template #cell="{ column, rowIndex, rowData }">
            <div v-if="column.key === 'count'" style="min-width:173px;max-width: 173px;">
                {{ rowData.count }}
            </div>
            <div v-if="column.key === 'time'" style="min-width:100px;max-width: 100px;">
                <div v-memo="[rowData.time]">{{ rowData.time.toLocaleDateString() }}</div>
            </div>
            <div v-if="column.key === 'index'">
                <el-button type="danger" @click="deleteBtn(rowIndex)">删除</el-button>
                <el-button type="primary" @click="compileBtn(rowData, rowIndex)">修改</el-button>
            </div>
        </template>
    </el-table-v2>
</template>

<style scoped>
::v-deep(.el-table-v2__row) {
    display: flex;
    justify-content: space-around;
    text-align: start;
}

::v-deep(.el-table-v2__header-row) {
    justify-content: space-around;
    text-align: end;
}
</style>